<template>
  <div class="detail-box">
    <!-- 电影名称 -->
    <div class="film-name">{{ film.filmName }}</div>
    <!-- 电影信息 stat-->
    <div class="film-info">
      <div class="film-tip">
        <div class="comment-count">
          <film-source :source="film.source"></film-source>
          <div class="star-count">93601短评</div>
        </div>
        <div class="film-desc">
          <p><span>上映时间:</span>{{ film.filmYear }}</p>
          <p><span>电影类型:</span>{{ film.filmTypes }}</p>
          <p><span>参演明星:</span>{{ film.castNames }}</p>
        </div>
      </div>
      <div
        class="film-img"
        :style="`background-image: url(${film.filmImg})`"
      ></div>
    </div>
    <!-- 电影信息 end-->
    <!-- 电影简介 start -->
    <div class="film-plot">
      <div class="plot-title">剧情简介</div>
      <div class="plot-content">
        {{ film.filmDesc }}
      </div>
    </div>
    <!-- 电影简介 end -->
    <!-- 演员阵容 start -->
    <div class="film-actor">
      <div class="actor-title">导演演员</div>
      <div class="actor-list">
        <div
          class="actor-item"
          v-for="(actor, index) in film.castList"
          :key="index"
        >
          <div
            class="actor-img"
            :style="`background-image: url(${actor.photo})`"
          ></div>
          <div class="actor-name">{{ actor.name }}</div>
        </div>
      </div>
    </div>
    <!-- 演员阵容 end -->
    <!-- 电影评论 start -->
    <div class="film-comments">
      <div class="comment-title">相关评论</div>
      
      <comment-list></comment-list>
    </div>
    <!-- 电影评论 end -->
  </div>
</template>

<script>
import CommentList from '../components/CommentList'

export default {
  data() {
    return {
      film: {},
    };
  },
  components:{
      CommentList
  },
  created() {
    this.loadDetailData();
  },
  methods: {
    loadDetailData() {
      this.$api
        .loadFilmByFilmId({
          filmId: this.$route.params.filmId,
        })
        .then((res) => {
          //   console.log(res);
          res.castList = JSON.parse(res.castList);
          this.film = res;
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>